<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <#include '/inc/frontResources.html'>
  <script type="text/javascript">
    var startDate = '${startDate!}';
    var endDate = '${endDate!}';
    var appId = '${appId!}';
    var chartParams = "&startDate="+startDate+"&endDate="+endDate;
    Highcharts.setOptions({
      global : {
        useUTC : false
      }
    });
    Highcharts.setOptions({
      colors : ['#2f7ed8', '#E3170D', '#0d233a', '#8bbc21', '#1aadce',
        '#492970', '#804000', '#f28f43', '#77a1e5',
        '#c42525', '#a6c96a']
    });

    function search() {
      var startDate = document.getElementById("startDate").value;
      document.getElementById("appInstanceNetStatForm").submit();
    }
  </script>
</head>

<body class="hold-transition sidebar-mini layout-navbar-fixed">
  <div class="wrapper">
    <!-- Header End -->
    <#include "/inc/head.html">
    <div class="content-wrapper ml-0">
      <div class="content">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">
              应用(<a target="_blank" href="${request.contextPath}/admin/app/index?appId=${appDesc.appId!}">${appDesc.name!}</a>)实例流量统计
            </h4>
          </div>
          <div class="card-body">
            <form method="get" action="${request.contextPath}/admin/app/appInstanceNetStat" id="appInstanceNetStatForm" class="d-flex justify-content-end">
              <div style="float:right">
                <label style="font-weight:bold;text-align:left;">
                  日期:&nbsp;&nbsp;
                </label>
                <input type="date" size="21" name="startDate" id="startDate" value="${startDate!}"/>
                <input type="hidden" name="appId" value="${appId!}">
                <label>&nbsp;<input type="button" class="btn btn-primary" value="查询" onclick="search()"/></label>
              </div>
            </form>
          </div>
          <script type="text/javascript">
            function genDetailContainer(i) {
              var mainContainer = document.getElementById("allInstanceContainers");
              var divNode = document.createElement("div");
              divNode.setAttribute('id', "appInstanceNetContainer" + i);
              divNode.setAttribute("style","max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto;");
              mainContainer.appendChild(divNode);
            }

            function fillDetailTable(instanceInfo, index) {
              var tb =document.getElementById('instanceNetDetailTable');
              var newTr = tb.insertRow(-1);
              newTr.align='center';
              var indexTd = newTr.insertCell();
              var instanceTd = newTr.insertCell();
              indexTd.innerHTML = (index+1);
              instanceTd.innerHTML = instanceInfo;
            }

            $(document).ready(
              function() {
                var url = "${request.contextPath}/admin/app/getAppInstancesNetStat.json?appId=" + appId + chartParams;
                $.ajax({
                  type : "get",
                  url : url,
                  async : true,
                  success : function(data) {
                    var dataArr = eval("(" + data + ")");
                    var length = dataArr.length;
                    for (var i = 0; i < length; i++) {
                      var instance = dataArr[i];
                      var instanceNetStatMapList = instance.instanceNetStatMapList;
                      if(instanceNetStatMapList.length == 0) {
                        continue;
                      }
                      genDetailContainer(i);
                      var title = "<b>实例("+instance.instanceInfo+")网络流量</b>";
                      var options = getOption("appInstanceNetContainer" + i, title,"次数");
                      var inPoints = getInstanceNetPoints(instance, "net_input", "i");

                      //统一流量单位
                      options.yAxis.title.text = inPoints.unitTxt;
                      var unit = inPoints.unit;

                      var outPoints = getInstanceNetPoints(instance, "net_output", "o", unit);
                      options.series.push(inPoints);
                      options.series.push(outPoints);
                      new Highcharts.Chart(options);
                    }
                  }
                });
              });
          </script>

          <div id="allInstanceContainers">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
